<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>品优购，优质！优质！-提交订单</title>
    <link rel="stylesheet" type="text/css" href="../static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="../static/css/main.css">
</head>
<body>
<div class="header_con">
    <div class="header">
        <div class="welcome fl">欢迎来到品优购生鲜!</div>
        <div class="fr">
            <div class="login_info fl">
                欢迎您：<em>张 山</em>
            </div>
            <div class="login_btn fl">
                <a href="login.html">登录</a>
                <span>|</span>
                <a href="register.html">注册</a>
            </div>
            <div class="user_link fl">
                <span>|</span>
                <a href="user_center_info.html">用户中心</a>
                <span>|</span>
                <a href="cart.html">我的购物车</a>
                <span>|</span>
                <a href="user_center_order.html">我的订单</a>
            </div>
        </div>
    </div>
</div>

<div class="search_bar clearfix">
    <a href="index.html" class="logo fl"><img src="../static/images/logo.png"></a>
    <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;提交订单</div>
    <div class="search_con fr">
        <input type="text" class="input_text fl" name="" placeholder="搜索商品">
        <input type="button" class="input_btn fr" name="" value="搜索">
    </div>
</div>

<h3 class="common_title">确认收货地址</h3>

<div class="common_list_con clearfix">
    <dl>
        <dt>寄送到：</dt>
    {{range .addrs}}
        <dd><input type="radio" name="address" value="{{.Id}}" {{if compare .IsDefault true}}checked{{end}}>{{.Addr}}
            （{{.Receiver}}
            收） {{.Phone}}</dd>
    {{end}}
    </dl>
    <a href="user_center_site.html" class="edit_site">编辑收货地址</a>

</div>

<h3 class="common_title">支付方式</h3>
<div class="common_list_con clearfix">
    <div class="pay_style_con clearfix">
        <input type="radio" name="pay_style" checked value="1">
        <label class="cash">货到付款</label>
        <input type="radio" name="pay_style" value="2">
        <label class="weixin">微信支付</label>
        <input type="radio" name="pay_style" value="3">
        <label class="zhifubao"></label>
        <input type="radio" name="pay_style" value="4">
        <label class="bank">银行卡支付</label>
    </div>
</div>

<h3 class="common_title">商品列表</h3>

<div class="common_list_con clearfix">
    <ul class="goods_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col02">商品单位</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
    </ul>
{{range .goods}}
    <ul class="goods_list_td clearfix">
        <li class="col01">1</li>
        <li class="col02"><img src="http://192.168.11.77:8888/{{.goodsSKU.Image}}"></li>
        <li class="col03">{{.goodsSKU.Name}}</li>
        <li class="col04">{{.goodsSKU.Unite}}克</li>
        <li class="col05">{{.goodsSKU.Price}}元</li>
        <li class="col06">{{.count}}</li>
        <li class="col07">{{.littlePrice}}元</li>
    </ul>
{{end}}
</div>

<h3 class="common_title">总金额结算</h3>

<div class="common_list_con clearfix">
    <div class="settle_con">
        <div class="total_goods_count">共<em>{{.totalCount}}</em>件商品，总金额<b>{{.totalPrice}}元</b></div>
        <div class="transit">运费：<b>{{.postage}}元</b></div>
        <div class="total_pay">实付款：<b>{{.actualPrice}}元</b></div>
    </div>
</div>

<div class="order_submit clearfix">
    <a href="javascript:;" id="order_btn" goodsIds="{{.goodsIds}}">提交订单</a>
</div>

<div class="py-container copyright footer">
    <ul>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>联系客服</li>
        <li>商家入驻</li>
        <li>营销中心</li>
        <li>手机品优购</li>
        <li>销售联盟</li>
        <li>品优购社区</li>
    </ul>
    <div class="address">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</div>
    <div class="beian">京ICP备08001421号京公网安备110108007702
    </div>
</div>

<div class="popup_con">
    <div class="popup">
        <p>订单提交成功！</p>
    </div>

    <div class="mask"></div>
</div>
<script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $('#order_btn').click(function () {
        //点击提交订单,把当前页面数据传递到后台,让后台插入数据
        addrId = $('input[name ="address"]:checked').val()
        //获取支付方式
        payId = $('input[name ="pay_style"]:checked').val()
        //获取商品信息
        goodsIds = $(this).attr("goodsIds")
        //获取总金额和总件数及运费
        totalCount = $(".total_goods_count").children("em").text()
        totalPrice = $(".total_goods_count").children("b").text()
        postage = $(".transit").children("b").text()
        //定义json类型参数,用于ajax传递参数
        param = {
            "addrId": addrId, "payId": payId, "goodsIds": goodsIds, "totalCount": parseInt(totalCount),
            "totalPrice": parseInt(totalPrice), "postage": parseInt(postage)
        }
        //使用ajaxj发送post请求到后台
        $.post("/commitOrder", param, function (data) {
            if (data.errno != 5) {
                alert(data.errmsg)
            } else {
                localStorage.setItem('order_finish', 2);
                $('.popup_con').fadeIn('fast', function () {
                    setTimeout(function () {
                        $('.popup_con').fadeOut('fast', function () {
                            window.location.href = '/user/userOrder';  //相当于a标签
                        });
                    }, 3000)
                });
            }
        })
    });
</script>
</body>
</html>